<template>
	<el-dialog v-model="dialogFormVisible" width="500">
		<template #header>
			<h2 class="title">添加卫生检查记录</h2>
		</template>
		<el-form :model="form" label-width="100px" label-position="left">
			<el-row>
				<el-col :span="20">
					<el-form-item label="房间号">
						<el-input v-model.number="form.dorNumber" />
					</el-form-item>
					<el-form-item label="问题">
						<el-input
							v-model.trim="form.hygDes"
							type="textarea"
							resize="none"
							maxlength="200"
							:show-word-limit="true" />
					</el-form-item>

					<el-form-item label="分数">
						<el-input v-model.number="form.checkSore" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="handleAddLog"> 添加记录 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import { addHygByHou } from '@/utils/axios/domiRequests'
import useRegStore from '@/stores/useReg'
import { ElMessage } from 'element-plus'

const { handleCheckDorNumber, isInteger } = useRegStore()

const dialogFormVisible = defineModel('dialogFormVisible', { required: true })

const form = reactive({
	dorNumber: '',
	checkSore: '',
	hygDes: '',
})

async function handleAddLog() {
	if (!handleCheckDorNumber(form.dorNumber)) return
	if (!isInteger(form.checkSore)) return ElMessage.warning({ message: '分数必须为数字', duration: 1000 })
	form.dorNumber=Number.parseInt(form.dorNumber)
	await addHygByHou(form)
	dialogFormVisible.value = false
}
</script>

<style scoped lang="scss">
.title {
	font-size: 20px;
	margin-bottom: 10px;
	color: #79bbff;
}
</style>
